<template>
	<div class="toastMask">
		<div class="mask">
			<div class="maskCont">
				<div class="maskContTop">
					{{toaskTitle}}
					<image src="@/static/image/close.png" mode="" class="maskContImg"  @click="toastClose()"></image>
				</div>
				<!-- 	<div class="maskContTitle">
					<div class="maskContTitleImg">
						<image :src="toaskUserInfo.avatar" mode=""></image>
					</div>
					<div class="maskContTitleText ex">
						{{toaskUserInfo.nickname || '游客'}}
					</div>
				</div> -->
				<div class="maskContCont" v-if="EitStatus ==1">
					您确定要清退当前推广员身份吗？
				</div>
				<div class="maskContCont" v-else>
					您确定要恢复当前推广员身份吗？<br />
					恢复后将<span>产生佣金</span>，请谨慎选择！
				</div>

				<view class="modal-footer">
					<u-button class="cancel-btn" color="#295EFF" :plain="true" type="primary" @click="toastClose()">取消
					</u-button>
					<u-button class="submit-btn" type="primary" @click="toastIndustry">确定</u-button>
				</view>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			toaskTitle: [String],
			toaskUserInfo: [Object, String],
			EitStatus: [Object, String, Number],
		},
		data() {
			return {

			}
		},
		methods: {
			toastClose() {
				this.$emit('toastClose')
			},
			toastIndustry() {
				this.$emit('toastIndustry')
			}
		}
	}
</script>

<style lang="scss">
	.mask {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
		width: 100%;
		left: 0;
		top: 0;
		position: fixed;

		.maskCont {
			width: 652rpx;
			min-height: 46rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			padding-bottom: 52rpx;

			.maskContTop {
				font-size: 36rpx;
				color: #1D2129;
				width: 100%;
				line-height: 100rpx;
				font-weight: bold;
				text-align: center;
			}

			.maskContImg {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 32rpx;
				top: 32rpx;
			}

			.maskContTitle {
				display: flex;
				align-items: center;
				justify-content: center;

				.maskContTitleImg {
					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}
				}

				.maskContTitleText {
					font-size: 28rpx;
					color: #8C8C8C;
					margin-left: 14rpx;
					width: 220rpx;
				}
			}

			.maskContCont {
				line-height: 40rpx;
				font-size: 28rpx;
				color: #464C5B;
				padding: 0 32rpx;
				margin-top: 24rpx;
				text-align: center;

				span {
					color: #FF5A5F;
				}
			}

			.modal-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
				padding: 0 32rpx;
			}

			.submit-btn {
				/* margin-top: 32rpx; */
				width: 276rpx;
				height: 76rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				background-color: #295FFF;
				border: 2rpx solid #295FFF !important;
			}

			.cancel-btn {
				width: 276rpx;
				height: 76rpx;
				border-radius: 16rpx;
				border: 2rpx solid #295FFF !important;
				color: #295EFF !important;
			}
		}
	}
</style>
